<template>
  <div>
    <el-tooltip
      v-if="value"
      effect="dark"
      :content="value"
      placement="top"
    >

      <el-input :value="value" :disabled="disabled" readonly>
        <el-button slot="append" icon="el-icon-search" :disabled="disabled" @click="handleEmit"></el-button>
      </el-input>
    </el-tooltip>
    <el-input v-else :value="value" :disabled="disabled" readonly>
      <el-button slot="append" icon="el-icon-search" :disabled="disabled" @click="handleEmit"></el-button>
    </el-input>
  </div>
</template>

<script>
export default {
  name: "SearchBar",
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleEmit() {
      this.$emit('change', null)
    }
  },
}
</script>

<style scoped>

</style>
